<template>
    <div class="app">
      <h1>欢迎来到 Vue 3 条件渲染示例</h1>
  
      <div v-if="userRole === 'admin' && isLoggedIn">
        <p>你好，管理员 {{ username }}！</p>
        <button @click="logout">登出</button>
      </div>
      <div v-else-if="userRole === 'user' && isLoggedIn">
        <p>你好，用户 {{ username }}！</p>
        <button @click="logout">登出</button>
      </div>
      <div v-else>
        <p>请登录以继续。</p>
        <input v-model="username" placeholder="用户名" />
        <select v-model="userRole">
          <option value="user">普通用户</option>
          <option value="admin">管理员</option>
        </select>
        <button @click="login">登录</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const username = ref('');
  const userRole = ref(''); // 用户角色
  const isLoggedIn = ref(false);
  
  // 登录函数
  const login = () => {
    if (username.value) {
      isLoggedIn.value = true; // 更新登录状态
    }
  };
  
  // 登出函数
  const logout = () => {
    isLoggedIn.value = false; // 更新登录状态
    username.value = ''; // 清空用户名
    userRole.value = ''; // 清空角色
  };
  </script>
  
  <style scoped>
  .app {
    text-align: center;
    margin-top: 50px;
  }
  input, select {
    margin: 10px;
    padding: 5px;
  }
  button {
    padding: 5px 10px;
  }
  </style>